﻿/// <reference path="App_ClientScripts/jquery-2.0.2.min.js" />
/// <reference path="App_ClientScripts/knockout-3.0.0.js" />

ko.bindingHandlers.Splitter = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here

		$(".Panel_1", element)
		.css("width", valueAccessor()())
		.resizable(
			{
				autoHide: false
			,	grid: [20, 20]
			,	minWidth: 150
			,	maxWidth: 450
			,	handles: 'e'
			,	resize: function(e, ui) 
				{
					var parent = ui.element.parent();

					var remainingSpace = parent.width() - ui.element.outerWidth(),
						divTwo = ui.element.next(),
						divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
						divTwo.width(divTwoWidth);

					valueAccessor()(ui.element.outerWidth() + "px");
				}
			,	stop: function(e, ui) 
				{
					var parent = ui.element.parent();

					ui
					.element
					.css(
						{
							width: ui.element.width()/parent.width()*100+"%",
						}
					);
				}
			}
		);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
		
    }
};

var Item = function (title, items, options)
{
	var self = this;

	self.SelectedItem = ko.observable(null);

	self.Ancestors = ko.observableArray([]);

	self.Parent = ko.observable(null);

	self.Parent.subscribe(
		function ()
		{
			var p = self;

			var r = [p];

			do
			{
				p = p.Parent();

				if (p == null)

					break;

				r = [p].concat(r);

			} while (p != null);

			self.Ancestors(r);
		}
	);

	self.Title = ko.observable(title);
	
	items = (this.Items = ko.observableArray((items) ? items : []))();
	
	for (var i in items)

		items[i].Parent(this);

	this.IsSelected = ko.observable(false);

	//if (options)

	//	for (var p in options)

	//		this[p](options[p]);

	this.OnSelect = function ()
	{
		if (this.Parent() != null)
		{
			if (!this.IsSelected())
			{
				this.Parent().SelectedItem(this);

				ViewModel.SelectedItem(this);
			}
			else
			{
				this.Parent().SelectedItem(null);

				ViewModel.SelectedItem(null);
			}

			if (!this.IsSelected())
			{
				var siblings = this.Parent().Items();

				for (var o in siblings)

					siblings[o].IsSelected(false);
			}
		}

		this.IsSelected(!this.IsSelected());
	};

	this.Add = function()
	{
		var o = new Item("Item " + this.Items().length);

		o.Parent(this);

		this.Items.push(o);
	};
};

var ViewModel = {
	Settings: {
		ContentViewWidth: ko.observable("250px")
	}
,	SelectedItem: ko.observable(null)
,	OnSelect: function ()
	{
		ViewModel.SelectedItem(this);
	}
,	Model: new Item(
		"Oraxi"
	,	[
			new Item(
				"Files"
			,	[
					new Item(
						"Google Drive"
					,	[
							new Item("Folder 01")
						,	new Item("Folder 02")
						]
					)
				,	new Item("YouTube")
				,	new Item("Facebook")
				,	new Item("Myspace")
				,	new Item("LinkedIn")
				,	new Item("Aim")
				,	new Item("MSN")
				,	new Item("Twitter")
				,	new Item("Dropbox")
				,	new Item("Flicker")
				,	new Item("Gmail")
				,	new Item("Google Talk")
				,	new Item("Picasa")
				,	new Item("Outlook")
				,	new Item("Reddit")
				,	new Item("SkyDrive")
				,	new Item("SoundCloud")
				,	new Item("Yahoo Mail")
				]
			)
		,	new Item("Pictures")
		,	new Item("Video")
		,	new Item("Websites")
		,	new Item("Contacts")
		,	new Item("Music")
		,	new Item("Drives")
		]
	)
};

$(document)
.ready(
	function ()
	{
		ko.applyBindings(ViewModel);
	}
);